<!--  -->
<template>
  <div ref="print" class='content'>
    <!-- <el-button v-show="printbtn" type="primary" @click="handlePrint">打印整页</el-button> -->
    <!--startprint1-->
    <div class="header1">
      <el-row :gutter="120" style="margin-bottom:20px;height:100%;">
        <el-col :span="8">
          <!-- <el-image style="height:50%" class="img" :src="url" :fit="fit"></el-image> -->
          <el-carousel :interval="4000" arrow="always" height="300px">
            <el-carousel-item v-for="item in imgs" :key="item">
              <img :src="item" class="img" style="height:100%;width:100%;display:block">
              <!-- <h3 class="medium">{{ item }}</h3> -->
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col style="height:100%;display:flex;flex-direction:column" :span="16">
          <el-card class="c_header">
            <div>{{headInfo.address}}</div>
          </el-card>
          <el-row class="c_body" :gutter="32">
            <el-col :span="12">
              <el-card>
                <div>资产面积 <span class="p_number">{{headInfo.buildarea}}</span><span style="font-size:20px;color:#2a7af7">m<sup>2</sup></span>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <div style="line-height:45px;">资产状态 <span v-if="JSON.stringify(formData)!='{}'" @click="handleContract" class="p_number1">{{formData.basic[14].value}}</span></div>
              </el-card>
            </el-col>
          </el-row>
          <el-card class="c_footer">
            <div style="margin-bottom:10px">资产编号 {{headInfo.num}}</div>
            <div v-if="headInfo.originaladdress!=''">原地址 {{headInfo.originaladdress}}</div>
            <div v-else>原地址 暂无</div>
          </el-card>
        </el-col>
        <!-- <el-col :span="12">
          <el-image class="img" :src="url" :fit="fit"></el-image>
          <el-carousel :interval="4000" arrow="always" height="100px">
            <el-carousel-item v-for="item in 6" :key="item">
              <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="12">
          <div class="info">
            <el-row :gutter="16">
              <p class="p_title">资产的地址</p>
              <el-col :span="12">
                <div class="p_number">102<span>m<sup>2</sup></span>
                  <div class="p_number2">资产面积</div>
                </div>
                <div class="p_small">资产编号{{formData.basic[0].value}}</div>
              </el-col>
              <el-col :span="12">
                <p>无</p>
                <p>资产租金</p>
                <p class="p_small">原地址:{{formData.basic[2].value}}</p>
              </el-col>
            </el-row>
          </div>
        </el-col> -->
      </el-row>
    </div>
    <div id="boxFixed" :class="{'is_fixed' : isFixed}">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item v-for="(item,index) in navList" :key="index" :index="item.id">{{item.title}}</el-menu-item>
      </el-menu>
    </div>
    <div>
      <el-row :id="'anchor-'+item.id" v-for="(item,index) in navList" :key="index" class="row-content">
        <el-card style="margin-top:20px">
          <div slot="header" class="clearfix">
            <i class="el-icon-search"></i>
            <span>{{item.title}}</span>
          </div>
          <div v-if="item.id==='1'">
            <el-form ref="form" label-position="left">
              <el-row>
                <div v-for="(item,i) in formData.basic" :key="i">
                  <el-col v-if="i==22||i==23|i==24" :span="24">
                    <el-form-item :label="item.name">
                      <span>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else-if="item.value==''||item.value==null" :span="8">
                    <el-form-item :label="item.name">
                      <span>—</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else :span="8">
                    <el-form-item :label="item.name">
                      <span>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-form>
          </div>
          <div v-if="item.id==='2'">
            <el-form ref="form" label-position="left">
              <el-row :gutter="32">
                <div v-for="(item,i) in formData.manage" :key="i">
                  <el-col v-if="i==30||i==31" :span="24">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else-if="item.value==''||item.value==null" :span="8">
                    <el-form-item :label="item.name">
                      <span>—</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else :span="8">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-form>
          </div>
          <div v-if="item.id==='3'">
            <el-form ref="form" label-position="left">
              <el-row :gutter="32">
                <div v-for="(item,i) in formData.finance" :key="i">
                  <el-col v-if="i==30||i==31" :span="24">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else-if="item.value==''||item.value==null" :span="8">
                    <el-form-item :label="item.name">
                      <span>—</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else :span="8">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-form>
          </div>
          <div v-if="item.id==='4'">
            <el-form ref="form" label-position="left">
              <el-row :gutter="32">
                <div v-for="(item,i) in formData.equities" :key="i">
                  <el-col v-if="i==31" :span="24">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else-if="item.value==''||item.value==null" :span="8">
                    <el-form-item :label="item.name">
                      <span>—</span>
                    </el-form-item>
                  </el-col>
                  <el-col v-else :span="8">
                    <el-form-item :label="item.name">
                      <span v-if="typeof(item.value)==='object'&&item.value!=null">{{item.value.time|parseTime}}</span>
                      <span v-else>{{item.value}}</span>
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-form>
          </div>
          <div v-if="item.id==='5'">
            <l-table :loading="roomCon.loading" :tablePage="roomCon.tablePage" :tableColumn="roomCon.tableColumn" :tableData="roomCon.tableData" @getPage="getPage"></l-table>
          </div>
          <div v-if="item.id==='6'">
            <l-table :loading="roomRepair.loading" :tablePage="roomRepair.tablePage" :tableColumn="roomRepair.tableColumn" :tableData="roomRepair.tableData" @getPage="getPage1"></l-table>
          </div>
          <div v-if="item.id==='7'">
            <l-table :loading="roomCheck.loading" :tablePage="roomCheck.tablePage" :tableColumn="roomCheck.tableColumn" :tableData="roomCheck.tableData" @getPage="getPage2"></l-table>
          </div>
          <div v-if="item.id==='8'">
            <l-table :loading="safeCheck.loading" :tablePage="safeCheck.tablePage" :tableColumn="safeCheck.tableColumn" :tableData="safeCheck.tableData" @getPage="getPage3"></l-table>
          </div>
          <div v-if="item.id==='9'">
            <l-table :loading="nowDanger.loading" :tablePage="nowDanger.tablePage" :tableColumn="nowDanger.tableColumn" :tableData="nowDanger.tableData" @getPage="getPage4"></l-table>
          </div>
        </el-card>
      </el-row>
    </div>

    <!--endprint1-->
    <template>
      <el-backtop target=".wrapper">
        <div class="back-ball">
          UP
        </div>
      </el-backtop>
    </template>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getRoomInfoDetails,
  getRoomCon,
  getRoomRepair,
  getRoomCheck,
  getNowDanger,
  getSafeCheck,
  getTopMessage,
  getRoomPIC
} from "@/api/table";
import { parseTime } from "@/utils/index";
import { getTableColumn } from "@/utils/baseData";
import LTable from "../components/LTable";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { LTable },
  filters: {
    parseTime
  },
  data() {
    //这里存放数据
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      activeIndex: "1",
      isFixed: false,
      offsetTop: 0,
      fit: "fill",
      imgs: [],
      printbtn: true,
      headInfo: {},
      navList: [
        { id: "1", title: "基础信息" },
        { id: "2", title: "经营信息" },
        { id: "3", title: "产权信息" },
        { id: "4", title: "财务信息" },
        { id: "5", title: "房屋情况日志" },
        { id: "6", title: "维修管理" },
        { id: "7", title: "资产检查记录" },
        { id: "8", title: "安全巡查记录" },
        { id: "9", title: "当前隐患" }
      ],
      tableToolbar: {
        refresh: true,
        setting: true
      },
      roomCon: {
        tableData: [],
        tableColumn: [],
        loading: false,
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      roomRepair: {
        loading: false,
        tableData: [],
        tableColumn: [],
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      roomCheck: {
        loading: false,
        tableData: [],
        tableColumn: [],
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      safeCheck: {
        loading: false,
        tableData: [],
        tableColumn: [],
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },
      nowDanger: {
        tableData: [],
        tableColumn: [],
        loading: false,
        tablePage: {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        }
      },

      loading: false,
      roomGuid: this.$route.query.roomGuid,
      formData: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handlePrint() {
      this.printbtn = false;
      setTimeout(() => {
        this.$print(this.$refs.print);
        this.printbtn = true; // 显示元素
      }, 50);
    },
    initImg() {
      let data = { roomGuid: this.roomGuid };
      getRoomPIC(data).then(res => {
        this.imgs = res;
      });
    },
    initHeadInfo() {
      let data = { roomGuid: this.roomGuid };
      getTopMessage(data).then(res => {
        this.headInfo = res;
      });
    },
    initConData() {
      this.roomCon.tablePage.guid = this.roomGuid;
      let data = this.roomCon.tablePage;
      getRoomCon(data).then(res => {
        this.roomCon.tableData = res.data;
        this.roomCon.tablePage.total = res.allCount;
        this.roomCon.tableColumn = getTableColumn("con");
      });
    },
    initRoomRepair() {
      this.roomRepair.tablePage.roomGuid = this.roomGuid;
      let data = this.roomRepair.tablePage;
      getRoomRepair(data).then(res => {
        this.roomRepair.tableData = res.data;
        this.roomRepair.tablePage.total = res.allCount;
        this.roomRepair.tableColumn = getTableColumn("repair");
      });
    },
    initRoomCheck() {
      this.roomCheck.tablePage.roomGuid = this.roomGuid;
      let data = this.roomCheck.tablePage;
      getRoomCheck(data).then(res => {
        this.roomCheck.tableData = res.data;
        this.roomCheck.tablePage.total = res.allCount;
        this.roomCheck.tableColumn = getTableColumn("roomCheck");
      });
    },
    initSafeCheck() {
      this.safeCheck.tablePage.roomGuid = this.roomGuid;
      let data = this.safeCheck.tablePage;
      getSafeCheck(data).then(res => {
        this.safeCheck.tableData = res.data;
        this.safeCheck.tablePage.total = res.allCount;
        this.safeCheck.tableColumn = getTableColumn("safeCheck");
      });
    },
    initNowDanger() {
      this.nowDanger.tablePage.roomGuid = this.roomGuid;
      let data = this.nowDanger.tablePage;
      getNowDanger(data).then(res => {
        this.nowDanger.tableData = res.data;
        this.nowDanger.tablePage.total = res.allCount;
        this.nowDanger.tableColumn = getTableColumn("nowDanger");
      });
    },
    handleContract() {
      if (this.formData.basic[14].value === "已出租") {
        this.$router.push({
          name: "contract",
          query: { chartGuid: this.headInfo.chartGuid }
        });
      }
    },
    handleSelect(index) {
      console.log("选中菜单 ", index);
      this.$el.querySelector("#anchor-" + index).scrollIntoView();
      // var anchor = this.$el.querySelector("#anchor-" + index);
      // document.documentElement.scrollTop = anchor.offsetTop;
    },
    getPage({ page, limit }) {
      this.roomCon.tablePage.pageIndex = page;
      this.roomCon.tablePage.pageSize = limit;
      this.initConData();
    },
    getPage1({ page, limit }) {
      this.roomRepair.tablePage.pageIndex = page;
      this.roomRepair.tablePage.pageSize = limit;
      this.initRoomRepair();
    },
    getPage2({ page, limit }) {
      this.roomCheck.tablePage.pageIndex = page;
      this.roomCheck.tablePage.pageSize = limit;
      this.initRoomCheck();
    },
    getPage3({ page, limit }) {
      this.safeCheck.tablePage.pageIndex = page;
      this.safeCheck.tablePage.pageSize = limit;
      this.initSafeCheck();
    },
    getPage4({ page, limit }) {
      this.nowDanger.tablePage.pageIndex = page;
      this.nowDanger.tablePage.pageSize = limit;
      this.initNowDanger();
    },
    initHeight() {
      // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
      var scrollTop = this.$root.$el.scrollTop;
      console.log("scroll", scrollTop);
      //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.$root.$el.addEventListener("scroll", this.initHeight, true);
      //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
      this.offsetTop = document.querySelector("#boxFixed").offsetTop;
      console.log("offsetTop", document.querySelector("#boxFixed").offsetTop);
    });
    let data = { roomGuid: this.roomGuid };
    getRoomInfoDetails(data).then(res => {
      this.formData = res;
    });
    this.initHeadInfo();
    this.initImg();
    this.initConData();
    this.initRoomRepair();
    this.initRoomCheck();
    this.initSafeCheck();
    this.initNowDanger();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
/deep/ th .vxe-cell {
  text-align: center;
}
.content {
  margin: 20px 150px 0px 150px;
  padding: 20px;
  .header1 {
    margin-bottom: 20px;
    height: 300px;
  }
  .el-card__header {
    padding: 10px 20px !important;
  }
  .img {
    // height: 100%;
    border-radius: 5px;
  }
  .c_header {
    text-align: left;
    font-size: 33px;
    color: #2a7af7;
  }
  .c_body {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .p_number {
    height: 90%;
    color: #2a7af7;
    font-size: 45px;
    span {
      font-size: 36px;
    }
  }
  .p_number1 {
    color: #2a7af7;
    font-size: 36px;
    cursor: pointer;
  }
  .info {
    // text-align: center;
    height: 100%;
    .info-content {
      display: flex;
      height: 80%;
      justify-content: space-around;
      align-items: flex-end;
    }
    .r_panel {
      height: 90%;
      .r_rent {
        color: #2a7af7;
        font-size: 36px;
      }
    }
    .p_small {
      height: 10%;
      font-size: 14px;
      color: #999999;
    }
  }

  .title1 {
    margin-left: 20px;
    span {
      font-size: 18px;
      margin-bottom: 20px;
      display: block;
    }
  }
  .el-menu-demo {
    box-shadow: 1px 4px 12px 1px #9aaddc61 !important;
  }
  .row-content {
    margin-bottom: 20px;
    .clearfix {
      color: #409eff;
    }
  }
}
.el-form-item {
  margin-bottom: 0px;
}
/deep/ .el-form-item__label {
  width: 100px;
  color: #999999;
  line-height: 20px;
}
/deep/ .el-form-item__content {
  line-height: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.is_fixed {
  position: fixed;
  top: 0;
  left: 30%;
  // margin-left: -250px;
  z-index: 999;
}
</style>